<template>
  <div class="component_wrap">
    <div class="form_wrap">
      <el-form :model="queryParams" label-width="auto" style="max-width: 1000px">
        
        <el-row :gutter="10">
          <el-col v-for="(item , index) in queryTitles" :key="'col_' + index" :xs="24" :sm="12" :md="8" :lg="8" :xl="3">
            <el-form-item :label="item.label">
              <el-input clearable v-model="queryParams[item.prop]" />
            </el-form-item>
          </el-col>


        </el-row>
      </el-form>
    </div>

    <div v-if="have_btn" class="btns_wrap">
      <el-button @click="search_btn" type="primary" plain>查询</el-button>
      <el-button @click="reset_btn" type="info" plain>重置</el-button>
      <slot name="btns"></slot>
    </div>

  </div>
</template>
<script lang="ts">
export default {
  name: 'MyForm'
}
</script>
<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  queryParams: Object,
  queryTitles: Object,
  have_btn: {
    type: Boolean,
    require: false,
    default: true
  }
})

const emit = defineEmits(['search_ev', 'reset_ev'])

function search_btn() {
  console.log('查询。。2221111。。。')
  emit('search_ev' , props.queryParams)
}
function reset_btn() {
  console.log('重置。。22222。。')
  emit('reset_ev' , {age: 213332})
}
</script>

<style lang="scss" scoped>
.component_wrap {
  display: flex;

  .form_wrap {
    flex: 1;
  }

  .btns_wrap {
    width: 200px;
  }
}
</style>